<template>
    <div class="container yuan-container">

        <a-card title="科室信息管理">
            <div class="filter-panel">
                <div style="float:right">
                    <a-button type="primary" class="filter-list" @click="add">新增疾病科室</a-button>
                    <a-button type="primary" class="filter-list" @click="addS">新增疾病</a-button>
                </div>

            </div>
            <div class="table">
                <a-table bordered :loading="loading" :rowKey="(item,i)=>item.id" :columns="columns" :data-source="pageList"
                    :pagination="false" :expandedRowKeys="expandedRowKeys" @expand="handleExpand">
                    <template slot='action' slot-scope="text, record, index">
                        <div>
                            <a-button type="warning" @click="clickEdit(record)">编辑</a-button>
                            <a-popconfirm okText="确定" cancelText="取消" title="是否禁用该信息" @confirm="clickDisable(record)"
                                v-if="record.status===1">
                                <a-button type="danger">禁用</a-button>
                            </a-popconfirm>
                            <a-popconfirm okText="确定" cancelText="取消" title="是否启用该信息" @confirm="clickOpen(record)" v-else>
                                <a-button type="success">启用</a-button>
                            </a-popconfirm>

                            <a-popconfirm okText="确定" cancelText="取消" title="是否删除该信息" @confirm="clickDel(record)">
                                <a-button type="danger">删除</a-button>
                            </a-popconfirm>

                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>
        <DetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" :editInfo="editInfo"
            @resetList="resetList" />
        <DetailSVue :visible="detailSVisible" @closeModal="() => detailSVisible = false" :editInfo="editInfo"
            @resetList="resetList" />
    </div>
</template>
<script lang="ts">
import api from "@/api/api";
import platformApi from "@/api/platformApi";
import { h } from "vue";
import { Component, Vue } from "vue-property-decorator";
import DetailVue from "./detail.vue";
import DetailSVue from "./detailS.vue";
@Component({
    name: "tpl",
    components: { DetailVue, DetailSVue },
})
export default class extends Vue {
    loading = false;
    expandedRowKeys: any[] = [];
    pageList: any[] = [];
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    columns = [
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "科室",
            customRender: (text: string, record: any, index: number) => {
                return record.parentId === 0 ? record.name : "";
            },
        },
        {
            align: "center",
            dataIndex: "childrenName",
            key: "childrenName",
            title: "疾病",
            customRender: (text: string, record: any, index: number) => {
                return record.parentId === 0 ? "" : record.name;
            },
        },
        {
            align: "center",
            dataIndex: "pageTable2",
            key: "pageTable2",
            title: "状态",
            customRender: (text: string, record: any, index: number) => {
                const statusList = [
                    { id: 0, name: "禁用", class: "c-danger" },
                    { id: 1, name: "启用", class: "c-success" },
                ];
                const findData = statusList.find((item) => {
                    return item.id === record.status;
                });
                if (findData) {
                    return h("span", { class: findData.class }, findData.name);
                }
                return "";
            },
        },
        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 300,
            scopedSlots: { customRender: "action" },
        },
    ];
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await platformApi.findBasicsInfoTree({
                type: "JB",
            });
            const arr: any[] = [];
            const key: any[] = [];
            res.data.forEach((item) => {
                key.push(item.id);
                if (!item.children || item.children.length === 0) {
                    item.children = null;
                } else {
                    item.children.forEach((child) => {
                        if (!child.children || child.children.length === 0) {
                            child.children = null;
                        }
                    });
                }
                arr.push(item);
            });
            this.pageList = arr;
            this.expandedRowKeys = key;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }

    mounted() {
        this.getList();
    }
    editInfo = {};
    detailVisible = false;
    add() {
        this.editInfo = {};
        this.detailVisible = true;
    }
    detailSVisible = false;
    addS() {
        this.editInfo = {};
        this.detailSVisible = true;
    }

    clickEdit(item) {
        this.editInfo = item;
        this.detailVisible = true;
    }
    clickEditS(item) {
        this.editInfo = item;
        this.detailSVisible = true;
    }
    async clickDel(item) {
        this.loading = true;
        try {
            await platformApi.deleteBasicsInfo(item.id);
            this.$message.success("删除成功");
            this.getList();
        } finally {
            this.loading = false;
        }
    }
    async clickDisable(item) {
        this.loading = true;
        try {
            await platformApi.updateBasicsStatus({
                id: item.id,
                status: 0,
            });
            this.$message.success("禁用成功");
            this.getList();
        } finally {
            this.loading = false;
        }
    }
    async clickOpen(item) {
        this.loading = true;
        try {
            await platformApi.updateBasicsStatus({
                id: item.id,
                status: 1,
            });
            this.$message.success("启用成功");
            this.getList();
        } finally {
            this.loading = false;
        }
    }

    handleExpand(expanded, record) {
        const key = record.id;
        this.expandedRowKeys = expanded ? [...this.expandedRowKeys, key] : this.expandedRowKeys.filter((k) => k !== key);
    }
}
</script>
<style scoped lang="scss">
.container {
}
</style>
